<template>
	<view class="container">
		<u-tabs-swiper class="tabs-fixed" ref="uTabs" :list="tabsList" :current="tabsCurrent" @change="tabsChange" :is-scroll="false" font-size="28" bar-height="6" bar-width="120" active-color="#6D4BBE"></u-tabs-swiper>
		<swiper class="tabs-swiper" :style="{height: height}" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item v-for="(item, index) in tabsList" :key="index">
				<mescroll-item ref="mescrollItem" :i="index" :index="swiperCurrent" :tabs="tabsList"></mescroll-item>
			</swiper-item>
		</swiper>
		
		<view class="wd-floating" @click="addcard">
			<u-icon name="plus" color="#fff" size="30" label="新增会员卡" label-size="16" label-color="#fff" label-pos="bottom"></u-icon>
		</view>
	</view>
</template>

<script>
	import MescrollItem from "./mescroll-swiper-item.vue";
	export default {
		components: {
			MescrollItem
		},
		data() {
			return {
				height: "400px", // 需要固定swiper的高度
				tabsList: [],
				tabsCurrent: 0,
				swiperCurrent: 0,
			}
		},
		onLoad(option) {
			this.tabsCurrent = 0
			this.swiperCurrent = 0
			// 需要固定swiper的高度
			this.height = uni.getSystemInfoSync().windowHeight + 'px';
			this.fetchCategory();
		},
		methods: {
			//获取分类
			fetchCategory(){
				let shop = this.$core.getCurrentShop();
				let shop_id = shop.id;
				this.$core.get({url:'fitness.common/category',data:{shop_id:shop_id},success:(ret)=>{
					 this.tabsList = ret.data;
				}});
			},
			
			addcard(){
				let that = this;
				uni.navigateTo({
					url: "/pages/user/cardForm/cardForm",
					events:{
						setSuccess:function(data){
							that.mescroll.resetUpScroll()
						}
					}
				})
			},
			
			
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.tabsCurrent = current;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F6F6F6;
	}
	.tabs-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}
	.tabs-swiper {
		swiper-item {
			height: 100%;
		}
	}
</style>